<template>
  <div class="top">
    <img src="@/assets/sensecap.png" alt="" />
    <span
      :class="!sidebar ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
      @click="TOGGLE_SIDEBAR"
    ></span>
    <div class="user">
      <span
        >{{ username }}（{{ type == 1 ? "超级管理员" : "普通管理员" }}）</span
      >
      <img src="@/assets/head.png" alt="" style="vertical-align: middle" />
      <span>|</span>
      <span @click="quit" style="color: blue">退出登录</span>
      <div class="triangle">
        <span class="zh">zh</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  name: "MyHeader",
  methods: {
    ...mapMutations(["TOGGLE_SIDEBAR"]),
    quit() {
      this.$store.dispatch("QuitAction");
    },
  },
  computed: {
    ...mapGetters(["sidebar", "username", "type"]),
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 50px;
  margin: auto;
  background-color: #fff;
  position: relative;
  > span {
    font-size: 30px;
    position: absolute;
    left: 134px;
    top: 11px;
  }
}
.user {
  float: right;
  line-height: 50px;
  span:nth-of-type(2) {
    display: inline-block;
    padding: 0px 10px;
  }
}
.triangle {
  height: 0;
  width: 0;
  border: 20px solid blue;
  border-left-color: transparent;
  border-bottom-color: transparent;
  float: right;
  position: relative;
}

.zh {
  position: absolute;
  top: -34px;
  right: -17px;
  color: #fff;
}
</style>